<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>web components</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      font-family: cursive;
    }

    h1 {
      text-align: center;
      padding: 20px 0;
    }

    .top20 {
      margin-top: 20px;
    }

    .flex {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 20px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 200px);
      grid-gap: 20px 20px;
      justify-items: center;
      align-items: center;
    }

    .dark {
      flex: 1;
      height: 100px;
      background-color: #3f2766;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
    }

    .light {
      flex: 1;
      height: 100px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 修改按钮颜色 */
    fc-parentheses-btn {
      --color: #6e50a6;
      --shadow-color: rgba(255, 255, 255, .4);
      --inset-shadow-color: #315;
      --inset-shadow-color-active: rgba(49, 23, 75, .9);
    }

    .gradientBg {
      width: 200px;
      height: 150px;
      text-align: center;
      line-height: 150px;
    }
  </style>
</head>

<body>
  <h1>面向未来的组件库：web components</h1>
  <!-- 自定义userCard组件 -->
  <div class="grid top20">
    <user-card image="https://semantic-ui.com/images/avatar2/large/kristy.png" name="User Name"
      email="yourmail@some-email.com"></user-card>

    <user-card id="userCard"
      image="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-46a8e6a6f8419bc8bf02dcec85d991d2_b.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637119890&t=7c5fa057d853feff8d50d12412b8453a"
      name="小笑残虹" email="2504862082@qq.com">
      <div slot="default">干饭人，干饭魂</div>
    </user-card>

    <!-- 反转卡片 -->
    <turn-card name="小笑残虹" sex="男" age="18" hobby="吃"></turn-card>

    <!-- 渐变背景 -->
    <gradient-bg>
      <div slot="default" class="gradientBg">渐变背景</div>
    </gradient-bg>

    <!-- 渐变背景变化 -->
    <bg-grad>
      <div slot="default" class="gradientBg">渐变背景变化</div>
    </bg-grad>
  </div>

  <hr />

  <div class="grid top20">
    <!-- 五星红旗 -->
    <div class="flex">
      <fc-china></fc-china>
    </div>
    <!-- 点击特效 -->
    <div class="flex">
      <fc-bubbles active="false" click style="--color:#ff3874;">
        <fc-3D-btn></fc-3D-btn>
      </fc-bubbles>
    </div>
    <!-- 波浪背景 -->
    <div class="flex">
      <fc-wave-filter color="#47E" style="width: 128px; height: 128px;">
        <img src="./img/bm.svg" alt="">
      </fc-wave-filter>
    </div>

    <!-- 输入框 -->
    <div class="light">
      <fc-typing-input placeholder="Username" class="top20"></fc-typing-input>
    </div>
    <!-- 暗黑模式 -->
    <div class="dark">
      <fc-input white placeholder="Username" class="top20"></fc-input>
    </div>
    <!-- 禁用 -->
    <div class="flex">
      <fc-input disabled value="小笑残虹" placeholder="Username" class="top20"></fc-input>
    </div>
  </div>

  <!-- 按钮 -->
  <div class="grid top20">
    <div class="flex">
      <fc-warp-btn></fc-warp-btn>
    </div>
    <div class="flex">
      <fc-3D-btn></fc-3D-btn>
    </div>
    <div class="flex">
      <fc-dbl-warp-btn></fc-dbl-warp-btn>
    </div>
    <div class="flex">
      <fc-round-btn></fc-round-btn>
    </div>
    <div class="flex">
      <fc-underline-btn></fc-underline-btn>
    </div>
    <div class="flex">
      <fc-parentheses-btn></fc-parentheses-btn>
    </div>
  </div>
  <div class="grid top20">
    <div class="flex">
      <fc-pixel-btn></fc-pixel-btn>
    </div>
    <div class="flex">
      <fc-arrow-btn></fc-arrow-btn>
    </div>
  </div>
</body>

<script src="./js/userCard.js"></script>
<script src="./js/turnCard.js"></script>
<script src="./js/gradientBg.js"></script>
<script src="./js/bgGrad.js"></script>
<script>
  let oUserCard = document.querySelector('#userCard');
  oUserCard.btnClick = function () {
    alert(`您关注了：${this.getAttribute('name')}`)
  }
</script>

<script type="module">
  // import { FcTypingInput } from "http://unpkg.zhimg.com/fancy-components";
  import {
    FcTypingInput,
    FcWarpBtn,
    Fc3DBtn,
    FcDblWarpBtn,
    FcRoundBtn,
    FcUnderlineBtn,
    FcParenthesesBtn,
    FcPixelBtn,
    FcArrowBtn,
    FcChina,
    FcBubbles,
    FcWaveFilter,
  } from "./js/fancyComponents.js";

  new FcTypingInput();
  // 重命名
  new FcTypingInput('fc-input');

  new FcWarpBtn();
  new Fc3DBtn();
  new FcDblWarpBtn();
  new FcRoundBtn();
  new FcUnderlineBtn();
  new FcParenthesesBtn();
  new FcPixelBtn();
  new FcArrowBtn();

  new FcChina();
  new FcBubbles();
  new FcWaveFilter();
</script>

</html>